<template>
  <div class="navbar">
    <div class="left-side">
      <a-space @click="toBack">
        <img
          alt="logo"
          src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
        />
        <a-typography-title :style="{ margin: 0, fontSize: '18px' }" :heading="5">Arco Pro</a-typography-title>
      </a-space>
    </div>
    <ul class="right-side">
      <li>
        <a-tooltip content="搜索">
          <a-button class="nav-btn" type="outline" :shape="'circle'">
            <template #icon>
              <icon-search />
            </template>
          </a-button>
        </a-tooltip>
      </li>
      <li>
        <a-tooltip :content="theme === 'light' ? '点击切换为暗黑模式' : '点击切换为亮色模式'">
          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="toggleTheme">
            <template #icon>
              <icon-moon-fill v-if="theme === 'dark'" />
              <icon-sun-fill v-else />
            </template>
          </a-button>
        </a-tooltip>
      </li>
      <li>
        <a-tooltip content="消息通知">
          <div class="message-box-trigger">
            <a-badge :count="9" dot>
              <a-button class="nav-btn" type="outline" :shape="'circle'">
                <icon-notification />
              </a-button>
            </a-badge>
          </div>
        </a-tooltip>
      </li>
      <li>
        <a-tooltip content="设置">
          <a-button class="nav-btn" type="outline" :shape="'circle'">
            <template #icon>
              <icon-settings />
            </template>
          </a-button>
        </a-tooltip>
      </li>
      <li>
        <a-dropdown trigger="click">
          <a-avatar :size="32" :style="{ marginRight: '8px', cursor: 'pointer' }">
            {{ avatar }}
          </a-avatar>
          <template #content>
            <a-doption>
              <a-space>
                <icon-tag />
                <span>
                  {{ $t('switchRoles') }}
                </span>
              </a-space>
            </a-doption>
            <a-doption>
              <a-space>
                <icon-user />
                <span>
                  {{ $t('userCenter') }}
                </span>
              </a-space>
            </a-doption>
            <a-doption>
              <a-space>
                <icon-settings />
                <span>
                  {{ $t('userSettings') }}
                </span>
              </a-space>
            </a-doption>
            <a-doption>
              <a-space>
                <icon-export />
                <span>
                  {{ $t('logout') }}
                </span>
              </a-space>
            </a-doption>
          </template>
        </a-dropdown>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useAppStore } from '@path/store';
import { useRouter } from 'vue-router';
const appStore = useAppStore();
const avatar = ref('用户');
const router = useRouter();
/**
 * 返回
 */
const toBack = () => {
  router.replace({ name: 'main' });
};
/**
 * 主题状态
 */
const theme = computed(() => {
  return appStore.theme;
});
/**
 * 主题切换
 */
const toggleTheme = () => {
  appStore.toggleTheme(theme.value);
};
// 初始化主题
appStore.initTheme(theme.value);
</script>
<style scoped lang="less">
@import './index.less';
</style>
